

$(document).ready(function(){

    window.onresize = function() {
        if($('#popupImage').length > 0){
            var img = $('#popupImage');            
            var imgTop = ($(window).height() - img.height())/2;
            var imgLft = ($(window).width() - img.width())/2;
            img.offset({top: imgTop,left: imgLft});
            $(".close").offset({
                left: imgLft + img.width()+20
            });    
        }
    }

    $('a.cell').click(function(){
        // Add overlay
        var height = $(document).height();
        $('<div id="overlay" />')
        .hide()
        .height(height)
        .appendTo('body')
        .fadeIn('slow');
        // Add image & center
        $('<img id="popupImage" src="' + $(this).find('img').attr('src') + '"/>').appendTo('body')+ 'alt ="Painting"';
        $('<img class="close" src="../../images/close.png" style="height:40px;width:40px;z-index=10;top:0;right:0"/>').appendTo('body')+ 'alt ="close"';
        var img = $('#popupImage');
        $(".close").offset($("#popupImage").offset());
            
        var imgTop = ($(window).height() - img.height())/2;
        var imgLft = ($(window).width() - img.width())/2;
        img
        .hide()
        .css({
            top: imgTop, 
            left: imgLft
        })
        .fadeIn('slow');
        $('body').css("background-color","black").fadeIn('slow');
            
        $(".close").offset({
            left: imgLft + img.width()+20
        });
        // Add click functionality to hide everything
        $('#overlay,#popupImage,.close').click(function(){
                    
            $('body').css("background-color","#D8D8D8");
            $('#overlay,#popupImage').fadeOut('slow',function(){
                $(this).remove();
                $('#overlay').remove();
                $('.close').remove();
            });
        })
    });
})